<template>
  <div ref="ele" class="time-line-double">

  </div>
</template>

<script>
/* eslint-disable */

import echarts from "echarts";
import Debug from "debug";
let dbg = Debug("DoubleViewTimeLine.vue");
dbg.enabled = true;

let the_chart = null;
export default {
  name: "DoubleViewTimeLine",
  data() {
    return {
      null_chart: echarts.init(document.createElement("null"))
    };
  },
  props: {
    lineconfig: {
      type: Object
    }
  },
  computed: {
    chart() {
      if (the_chart) {
        return the_chart;
      }
      return this.null_chart;
    },
    starterId() {
      return this.$store.state.starterId;
    },
    font_size() {
      return 12;
    },
    opt_serieses() {
      return [];
    },
    opt_grids() {
      return [
        {
          top: 40
        },
        {
          bottom: 60
        }
      ].map(e => {
        e = {
          ...e,
          left: "8%",
          right: "18%",
          height: 270,
          // containLabel: true,
          show: false
        };
        return e;
      });
    },
    opt_yAxises() {
      return _.flatten(
        this.opt_grids.map((__, i) => {
          return [
            {
              name: "Voltage /V",
              type: "value",
              min: 0,
              max: 30,
              offset: 75,
              position: "right",
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["u30"]
                }
              },
              comment: "V" //用于后面找这个轴
            },
            {
              name: "Speed /RPM",
              type: "value",
              min: 0,
              max: 1500,
              position: "left",
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["speed"]
                }
              },
              comment: "RPM"
            },
            {
              name: "Current /A",
              type: "value",
              min: 0,
              max: 1500,
              position: "right",
              offset: 0,
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["i30"]
                }
              },
              comment: "A"
            },
            {
              name: "POWER /W",
              type: "value",
              min: 0,
              max: 8000,
              position: "left",
              offset: 75,
              axisLine: {
                lineStyle: {
                  color: this.lineconfig.colors["water"]
                }
              },
              comment: "W"
            }
          ].map(e => {
            e = {
              ...e,
              gridIndex: i,
              splitLine: {
                show: false
              }
            };
            return e;
          });
        })
      );
    },
    opt_legend() {
      return {
        show: true,
        data: _.uniqBy(
          this.opt_serieses.map(e => {
            return {
              name: e["name"],
              icon: "roundRect"
            };
          }),
          e => e["name"]
        ),
        orient: "vertical",
        right: 60,
        bottom: 40,
        type: "scroll",
        itemHeight: this.font_size,
        textStyle: {
          fontSize: this.font_size
        }
      };
    },
    opt_echarts() {
      return {
        backgroundColor: "#FFF",
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          },
          axisPointer: {
            type: "cross"
          },
          formatter: params => {
            let res = "&nbsp;&nbsp;&nbsp;time : " + params[0].data[0] + "ms";
            // debugger
            params.forEach(v => {
              res += "<br>" + v.marker + v.seriesName + " : " + v.data[1];
            });
            return res;
          }
        },
        grid: this.opt_grids,
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0, 1]
            // startValue: 0,
            // endValue: '100%'
          }
        ],
        yAxis: this.opt_yAxises,
        legend: this.opt_legend,
        xAxis: [0, 1].map(gridIndex => {
          return {
            type: "category",
            gridIndex: gridIndex,
            data: _.range(0, 3001),
            axisTick: {
              interval: 499,
              alignWithLabel: true,
              lineStyle: {
                color: "#333"
              }
            },
            name: "",
            nameGap: 23,
            nameLocation: "center",
            axisLabel: {
              interval: 499
            },
            offset: 5,
            axisLine: {
              onZero: false,
              lineStyle: {}
            }
          };
        }),
        series: [...this.opt_serieses]
      };
    }
  },
  mounted() {
    the_chart = echarts.init(this.$refs["ele"]);
    this.chart.setOption(this.opt_echarts);
  },
  watch: {
    opt_echarts(val) {
      try {
        this.chart.clear();
        this.chart.setOption(val);
      } catch (e) {
        console.error(e);
      }
    },
    starterId() {
       try {
        this.chart.clear();
        this.chart.setOption(this.opt_echarts);
      } catch (e) {}
    }
  },
  methods: {
    /**
     * @api public
     * @param {Array<{gridIndex:Number,test_id:Number}>} raw_xAxis
     * @param {Array<{gridIndex:Number,test_id:Number,comment:String}>} raw_yAxises
     * @param {Array<{name:String,test_id:Number,xAxisIndex:Number}>} raw_series
     */
    setOpts(raw_xAxis, raw_yAxises, raw_series, func = () => {}) {
      setTimeout($ => {
        // debugger
        func(raw_xAxis, raw_yAxises, raw_series, this);
      }, -1);
    }
  }
};
</script>

<style>
.time-line-double {
  width: 1526px;
  height: 712px;
  background-color: white;
}
</style>
